<template>
    <div class="admin">
        <header>header</header>
        <aside>
            <ul>
                <li>
                    <router-link to="/admin/work-1">练习1</router-link>
                </li>
                <li>
                    <router-link to="/admin/work-2">练习2</router-link>
                </li>
            </ul>
        </aside>
        <main>
            <transition name="admin">
                <router-view />
            </transition>
        </main>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="sass" scoped>  
.admin
    & > *
        position: fixed
        color: #fff
    header
        top: 0
        right: 0
        left: 0
        height: 80px
        background: #999
    aside
        top: 80px
        bottom: 0
        width: 200px
        left: 0
        background: #eee
        .router-link-active 
            background: #666
            color: #fff
    main
        top: 80px
        right: 0
        bottom: 0
        left: 200px
        background: #ccc
    .admin-enter,.admin-leave
        opacity: 0
    .admin-enter-active,.admin-leave-active
        transition: 1s
</style>